<template>
	<div class="container">
		<JxNavbar title='搜索' />

		<div class="search-box">
			<input v-model="searchVal" class="jx-input" confirm-type='search' placeholder="请输入关键词" @confirm='confirmSearch' />
		</div>

		<uv-gap height="24rpx"></uv-gap>

		<div class="search-list">
			<div class="list-box">
				<div class="list-item" v-for="(item, index) in listData" :key="index">
					<JxList :item='item' />
				</div>
			</div>
		</div>

		<JxLoadMore :list="listData" :loadStatus='loadStatus' />
		<AuxiliaryMenu />
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	import file from '@/utils/file/index.js'
	import tools from '@/utils/tools/index.js'
	import articles from '@/api/articles/index.js'
	import JxList from '@/components/list/index.vue'
	import { onReachBottom, onLoad } from '@dcloudio/uni-app'
	import JxNavbar from '@/components/navbar/index.vue'
	import JxLoadMore from '@/components/LoadMore/index.vue'
	import AuxiliaryMenu from '@/components/AuxiliaryMenu/index.vue'

	const page = ref(1);
	const listData = ref([]);
	const searchVal = ref('');
	const loadStatus = ref('loadmore')

	async function initData() {
		page.value = 1;
		tools.loading('page');
		listData.value = await getList();
		uni.hideLoading()
	}

	async function getList() {
		loadStatus.value = 'loading'
		const response = await articles.search({ page: page.value, limit: 10, sort: 'hot', keyword: searchVal.value });
		if (response['code'] == 200) {
			const list = response['data'].map(item => {
				item['cover'] = file.getFileUrls(item['cover']);
				item['user']['avatar'] = file.getFileUrl(item['user']['avatar']);
				item['shortDate'] = tools.shortDate(item['create_date'])
				return item;
			})

			loadStatus.value = list.length < 10 ? 'nomore' : 'loadmore';
			return list;
		}

		return [];
	}

	function confirmSearch() {
		if (!searchVal.value) return tools.toast({ title: '请输入关键词' })
		initData();
	}

	onReachBottom(async () => {
		if (loadStatus.value === 'loadmore') {
			page.value++;
			const list = await getList();
			listData.value = listData.value.concat(list);
		}
	})

	onLoad((option) => {
		searchVal.value = option.q || '';
		initData();
	})
</script>

<style lang="scss" scoped>
	.container {
		background: $uv-bg-color;

		.search-box {
			padding: 16rpx $side-width;
			background: #fff;

			.jx-input {
				width: 100%;
				box-sizing: border-box;
				height: 80rpx;
				background: #f2f2f2;
				border-radius: 23px;
				padding: 0 $side-width;
				font-size: 30rpx;
				margin-right: $side-width;
			}
		}

		.search-list {
			padding: 0 $side-width;

			.list-box {
				border-radius: 8px;
				padding: 0 $side-width;
				background: #fff;

				.list-item {
					background: #fff;
					margin-top: $side-width;
					padding-bottom: $side-width ;

					&:first-child {
						margin-top: 0;
						padding-top: $side-width;
					}
				}
			}
		}
	}
</style>